<%@ page language="java" contentType="text/html;charset=utf-8"%>
<!doctype html>
<!--[if lt IE 7]><html lang="en-CA" class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html lang="en-CA" class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html lang="en-CA" class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en-CA" class="no-js">
<!--<![endif]-->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Guhappy</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<%
		String path = request.getContextPath();
		String basePath = request.getScheme() + "://"
				+ request.getServerName() + ":" + request.getServerPort()
				+ path + "/";
	%>
	<base href="<%=basePath%>">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/header.css" rel="stylesheet">
	<link href="css/common.css" rel="stylesheet">
	<style type="text/css">
		.btn{
			width:120px;
			color:white;
			background-color:#329632;
		}
		
	</style>
</head>
<body>
	<jsp:include page="header.jsp" />
	<div class="row" style="margin-top:80px">
		<div class="col-xs-12 col-md-8 col-md-offset-2">
			<div id='popularStocks' class='marquee-with-options'>滚动条</div>
		</div>
	</div>
	
	<div class="container" style="text-align:center;margin-top:20px">
		<h4>You have selected <span id="list_len"></span> votes:</h4><br>
		<span id='votes_list'>
		
		</span>
		<div class='col-md-6 col-md-offset-3'>
			<hr>
			<div class='row'>
				<div class='col-xs-1 col-md-1 col-md-offset-7 col-xs-offset-7'>
					Total: 
				</div>
				<div id='total_price' class='col-md-2'>
				</div>
			</div>
		</div>
	</div>
	<div class="container col-xs-11 col-md-4 col-md-offset-4 col-xs-offset-1" style="margin-top:20px">
		<h4>Your payment options:</h4><br>
		<div class="row">
			<div class='col-xs-7 col-md-8'>
				Pay via PayPal
			</div>
			<div class='col-xs-4 col-md-4'>
				<button id="paypal_button" class="btn btn-default">Check out</button>
			</div>
		</div>
		<div class="row" style="margin-top:10px">
			<div class='col-xs-7 col-md-8'>
				Pay via Credit Card
			</div>
			<div class='col-xs-4 col-md-4'>
				<button id="paypal_button" class="btn btn-default">Check out</button>
			</div>
		</div>
	</div>
</body>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="js/header.js"></script>
<script type="text/javascript" src="js/bar.js"></script>
<script>
function refreshList() {
	var cookie_votes_list = $.cookie('votes_list');
	if(cookie_votes_list != null) {
		var votesList = JSON.parse(cookie_votes_list);
		if(votesList.votes_list.length > 0) {
			$("#checkout_button").removeAttr('disabled');
		}
		else {
			$("#checkout_button").attr('disabled', 'true');
		}
		$("#list_len").text(function(i,origText) {
			return votesList.votes_list.length;
		});
		$("#votes_list").html(function(i,origHtml){
			var html = "";
			$.each(votesList.votes_list, function(index, result) {
				//if(html.length > 0) html += "<br>";
				html += "<div class='row'><div class='col-xs-4 col-md-2 col-md-offset-4 col-xs-offset-1' style='text-align:left'>";
				//html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
				html += result.market;
				html += "&nbsp;:&nbsp;";
				html += result.symbol;
				html += "</div><div class='col-xs-4 col-md-1' style='text-align:left'>";
				html += result.bull_bear;
				html += "&nbsp;&nbsp;";
				html += result.period;
				html += "</div><div class='col-xs-1 col-md-1' style='text-align:center'>";
				html += "8$";
				html += "</div></div>";
			});
			return html; 
		});

		$("#total_price").html(function(i,origHtml) {
			var price = votesList.votes_list.length * 8;
			return '<b>' + price + '$</b>';
		});
		
		$(".delete-btn").click(function(e) {
			e.preventDefault();
			var cookie_votes_list = $.cookie('votes_list');
			if(cookie_votes_list != null) {
				var votesList = JSON.parse(cookie_votes_list);
				votesList.votes_list.splice(parseInt($(this).val(),10), 1);
				$.cookie('votes_list',JSON.stringify(votesList));
				refreshList();
			}
		});
	}
	else {
		$.cookie('votes_list',JSON.stringify({ votes_list:[]}));
		$("#list_len").text(function(i,origText) {
			return "0";
		});
	}
}

$(function() {
	//$.removeCookie("votes_list");
	refreshList();
	
	var $mwo = $('.marquee-with-options');
	
	$.get("data/popular.json",function(data,status){
		if(status=="success") {
			var html = '';
			var data = JSON && JSON.parse(JSON.stringify(data)) || $.parseJSON(data);
			for(var i in data.stocks) {
				var inner = '<span class="popularStock" style="color:';
				var stock = data.stocks[i];
				if(stock.change.indexOf('-') > -1) {
					inner += '#AA1111;">';
				}
				else {
					inner += '#228822;">';
				}
				inner += stock.symbol + ' ' + stock.change + '</span>&nbsp;&nbsp;&nbsp;&nbsp;';
				html += inner;
			}
			
			$("#popularStocks").html(function(i,origHtml){
				return html; 
			});
			
			$mwo.marquee();
			
			var showing = false;
			var symbol = "";
			var currentSymbol = "";
			$(".popularStock").click(function(){
			});
		}
	});
});
</script>
</html>